<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" />
	</head>
	<body>
		<table id="tab1" lay-filter="tab2"></table>
		
		<script type="text/html" id="delAll">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
				<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
			</div>
		</script>
		
		<script type="text/html" id="caozuo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
		</script>
		
		
		<div style="display: none;" id="divAddForm">
			<br />
			<form  class="layui-form" lay-filter="myForm">
				<div class="layui-form-item">
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-inline">
						<input type="text" name="username" placeholder="请输入姓名"  class="layui-input" required lay-verify="required" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block">
						<input type="radio" name="sex" value="男" title="男" checked>
      					<input type="radio" name="sex" value="女" title="女" >
					</div>
				</div>
				<div class="layui-form-item">
				    <label class="layui-form-label">选择框</label>
				    <div class="layui-input-inline">
				      <select name="city" lay-verify="required">
				        <option value=""></option>
				        <option value="北京">北京</option>
				        <option value="上海">上海</option>
				        <option value="城市-0">城市-0</option>
				        <option value="城市-1">城市-1</option>
				        <option value="城市-2">城市-2</option>
				      </select>
				    </div>
				  </div>
				  <div class="layui-form-item">
					<label class="layui-form-label">签名</label>
					<div class="layui-input-inline">
						<input type="text" name="sign" placeholder="请输入签名"  class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item">
				    <div class="layui-input-block">
				      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
				    </div>
				  </div>
				
			</form >
		</div>
		
		
		
		<script type="text/javascript" src="layui/layui.js" ></script>
		<script>
			var openIndex
			var tableRender
			layui.use(['table','layer','jquery','form'],function(){
				var table = layui.table
				var layer = layui.layer
				var $ = layui.jquery
				var form = layui.form
				
				// 给table初始化数据
				tableRender = table.render({
					elem:'#tab1'
					,height :312
					,url:'json/users.json'
					,page : true 
					,cellMinWidth : 50   /* 设置单元格最小宽度 */
					,cols:[[
						{field:'chk',type:'checkbox',LAY_CHECKED:false}
						,{field:'id',title:"编号",sort: true}
						, {field:'username',title:'姓名',edit:'text'}
						 ,{field: 'sex', title: '性别',  hide:true}
					      ,{field: 'city', title: '城市'} 
					      ,{field: 'sign', title: '签名'}
					      ,{field: 'experience', title: '积分', sort: true}
					      ,{field: 'score', title: '评分', sort: true}
					      ,{field: 'classify', title: '职业',align:'center'}
					      ,{field: 'wealth', title: '财富', sort: true,minWidth:40}
					      ,{fixed:'right' , title: '操作', minWidth:150 , toolbar:'#caozuo'}
					]]
					,limit:5   /* 每页显示条数 */
					,limits:[5,10,15,20] /* 每页显示条数下拉框 */
					,toolbar:'#delAll' /* 给表格添加头部工作栏 */
				})
				
				// 监听头部工具栏点击事件
				table.on('toolbar(tab2)',function(obj){
					/* obj.config.id : 获取当前点击批量删除的table表格的id */
					/* table.checkStatus() 方法是来获取当前表格选中行的内容，是否全选的判定 */
					var checkStatus = table.checkStatus(obj.config.id);
					if(obj.event == "deleteAll"){
						
						// 判断是否有选择数据
						if(checkStatus.data.length == 0){
							layer.msg("至少选择一条数据")
							
						}else{
							// 获取选中的数据的id
							var dt = checkStatus.data
							var ids = ""
							for(var i = 0; i< dt.length;i++){
								ids += dt[i].id + " , "
							}
							
							layer.msg(ids)
						}
						
						
					}else if(obj.event == "add"){
						btnAdd()
					}
				})
				
				
				function btnAdd(){
					openIndex = layer.open({
						type: 1 
						,title:"用户添加"
						,content:$('#divAddForm')
						,area:['370px','330px']
					})
				}
				
				// 监听form表单提交按钮
				form.on('submit(formDemo)',function(data){
					var params = JSON.stringify(data.field);
					console.info(params)
					/*$.post("",{"key":val,"key":zhi},function(r){
						
					})*/
					
					layer.msg("添加成功")
					tableRender.reload()
					
					// 关闭添加的弹出框
					layer.close(openIndex)
					
				})
				
				// 监听行按钮的实践
				table.on('tool(tab2)',function(obj){
					
					if(obj.event  == "edit"){
						//layer.msg("edit:" + obj.data.id)
						editUser(obj.data)
					}else if(obj.event  == "del"){
						layer.msg("del:"+ obj.data.id)
						
					}
				})
				
				function editUser(data){
					openIndex = layer.open({
						type: 1 
						,title:"用户修改"
						,content:$('#divAddForm')
						,area:['370px','330px']
					})
					
					// 给form表单设置值   lay-filter="myForm"
					form.val("myForm",data)
				}
				
			})
			
			
			
			
			
		</script>
	</body>
</html>

